<template>
	<view class="u-wrap">
		<view class="mt-5" v-if="u_loadmore">
			<u-loadmore status="loading" icon-type="circle" />
		</view>
		<view v-else>
			<view class="bg-white rounded-15 m-2 rounded-15">
				<!-- 搜索 -->
				<view class=" bg-white m-2  d-flex j-center a-center">
					<view class="px-3 d-flex mt-2 py-1 rounded-50 span-20 bg-light-secondary">
						<u-icon @click="seach_confirm"  name="search" color="" size="28"></u-icon>
						<input class="ml-2" @confirm="seach_confirm" v-model="seach_keywords" type="text" placeholder="搜索商品" @input="seach_input"  />
					</view>
				</view>
				<view class="list">
					<!-- 左边菜单栏 -->
					<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
						<view v-for="(item,index) in oneClazz" :key="index" class="u-tab-item"  :class="[current==index ? 'u-tab-item-active' : '']"
						@tap.stop="terrace_add(item,index)">{{item.cat_name}}</view>
					</scroll-view>
					<!-- 右边内容 -->
					<view class="flex-1">
						<scroll-view scroll-y="true" >
							<view class="px">
								<view class="thumb-box" v-if="subCatId == item.parent_id" v-for="(item, index) in twoClazz" :key="index" :data-current="index"  @click="terrace_level(item, index)">
									<!-- 二级  -->
									<view class="item-menu-name py-3 pl-3">{{item.cat_name}}</view>
									<!-- 三级 -->
									<view class="" v-show="item.cat_id==threeCatId">
										<view class="d-flex bg-light-secondary py-2 j-around flex-wrap">
											<view class="span-9 bg-white rounded-50 flex-wrap my-2"  v-if="item.cat_id==tabItem.parent_id"  v-for="(tabItem,tabIndex) in threeClazz" :key="tabIndex" >
												<view class=" py-1 text-center rounded-50 border" :class="[sanIndex==tabIndex ? 'active_san' : '']" @click.stop="terrace_three(tabItem,tabIndex)">
													{{tabItem.cat_name}}
												</view>
											</view>	
										</view>
									</view>	
								</view>
							</view>	
						</scroll-view>
							
					</view>
				</view>
			</view>
			<view class="bg-white py-2 w-100 position-fixed bottom-0 btn">
				<button type="warn" @click="preserve">搜索</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'', // 公共ID
				terraceClazz:[], // 平台分类
				oneClazz:[], // 1级平台分类
				twoClazz:[], // 2级平台分类
				threeClazz:[], // 3级平台分类
				current:0,  // 标识符tab
				subCatId:'', // cat_id标识符
				threeCatId:"",	// 二级cat_id标识符
				seach_keywords:"", // 关键字
				goods_id:'', // 商品ID
				goods_name:"", // 标识
				edit_name:"",// 选择
				next_name:"",
				u_loadmore:true, // 加载中
			}
		},
		onLoad(e) {
				console.log(e)
				this.goods_id=e.goods_id
				this.goods_name=e.goods_name
				this.edit_name=e.edit_name
				this.next_name=e.next_name
				// 平台分类
				this.$H.post("admin/merchant/goods/category").then(res=>{
					this.terraceClazz=res.data
					this.terraceClazz.filter((item,index)=>{
							return item.icon_show=false
					})
					this.oneClazz=this.terraceClazz.filter((item,index)=>{
						if(item.parent_id==0){
							return item
						}
					})
					this.id=1 // 默认ID
					this.u_loadmore=false 
				})
		},
		methods: {
			// 平台展开 收起 一级
			terrace_add(items,indexs){
				this.current=indexs
				this.subCatId=items.cat_id
				this.twoClazz=this.terraceClazz.filter((item,index)=>{
					if(items.cat_id==item.parent_id){
						return item
					}
				})
				console.log(this.subCatId)
				this.id=items.cat_id
			},
			// 平台二级列表
			terrace_level(tabItem,tabIndex){
				this.threeClazz=this.terraceClazz.filter((item,index)=>{
					if(tabItem.cat_id==item.parent_id){
						return item
					}
				})
				this.threeCatId=tabItem.cat_id
				this.id=tabItem.cat_id
			},
			// 平台三级列表
			terrace_three(tabItem,tabIndex){
				let addclass={
					cat_id:tabItem.cat_id,
					cat_name:tabItem.cat_name
				}
				var globalData = getApp().globalData.clazz; //获取全局变量
				getApp().globalData.clazz= addclass; //修改全局变量
				this.id=tabItem.cat_id
			},
			// 搜索
			preserve(){
				uni.navigateTo({
					url:`/pages/goods-option-ass/goods-option-ass?cat_id=${this.id}&goods_id=${this.goods_id}&goods_name=${this.goods_name}&edit_name=${this.edit_name}&next_name=${this.next_name}`
				})
			},
			// 搜索框监听
			seach_input(e){
				this.seach_keywords=e.detail.value
			},
			// 搜索框确认
			seach_confirm(){
				uni.navigateTo({
					url:`/pages/goods-option-ass/goods-option-ass?seach_keywords=${this.seach_keywords}&goods_id=${this.goods_id}&goods_name=${this.goods_name}&edit_name=${this.edit_name}&next_name=${this.next_name}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.u-wrap {
		height: calc(100vh);
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */
		display: flex;
		flex-direction: column;
	}
	.u-search-box {
		padding: 18upx 30upx;
	}

	.u-tab-view {
		width: 30%;
		height: 100vh;
		border-right:1px solid #EAEAEA ;
	}

	.u-tab-item {
		height: 110upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26upx;
		color: #444;
		font-weight: 400;
		line-height: 1;
	}
	
	.u-tab-item-active {
		color: #CB666A;
		background-color: #f4f4f4;
		border-left: 3px solid  #CB666A;
	}
	
	.btn /deep/ button{
		width: 85%;
		border-radius: 50upx;
		background: linear-gradient(to right,#F31E3E,#FB4F37);
	}
	
	.u-tab-view {
		height: 100%;
	}
	
	.px{
		height: 80vh;
	}
	
	.thumb-box {
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	.collapse-item {
		color: red;
		padding-bottom: 10px;
	}
	.active_san{
		background-color: #f4d7dc;
		color: #CB666A;
		
	}	
	
	.list {
		border-top:1px solid #EAEAEA ;
		display: flex;
		width: 100%;
		height: 79vh;
	}
	
	.list-item {
		flex: 1;
	}
		
</style>
